/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { FirstHeaderC, NoDataMaskC, TableC } from '../../../../comps';
import PropTypes from 'prop-types';
import { connect } from 'dva';

class BaseInfoC extends PureComponent {
  static defaultProps = {
    height: '230px',
  };
  state = {
    dataSource: [], //表格信息
    columns: [],
    masking: true, //蒙版
    page: '1',
    pageSize: '1000',
  };

  componentDidMount() {
    if (this.props.tradingcode) {
      this.getData(this.props);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.tradingcode !== nextProps.tradingcode || this.props.timeStamp !== nextProps.timeStamp) {
      if (nextProps && nextProps.tradingcode) {
        this.getData(nextProps);
      } else {
        this.setState({
          masking: true,
          dataSource: [],
          columns: [],
        });
      }
    }
  }

  getData = (datas) => {
    const { dispatch } = this.props;
    const { tradingcode } = datas;
    const { page, pageSize } = this.state;
    this.setState({
      masking: false,
    });
    dispatch({
      type: 'etfOrderM/getStockInfo',
      payload: {
        tradingcode: tradingcode,
        page: page,
        pageSize: pageSize,
        userId: localStorage.getItem('antd-pro-userId'),
        maatApi: this.props.maatApi,
      },
      callback: (data, columns) => {
        if (data && data.length) {
          const dataSource = data.map((item) => {
            return { componentnum: item.componentnum + item.unit, mtradingcode: item.id.mtradingcode + '-' + item.msecuabbr };
          });
          this.setState({
            dataSource: dataSource,
            columns: columns,
          });
        } else {
          this.setState({
            dataSource: [],
            columns: [],
          });
        }
      },
    });
  };

  render() {
    const { height, type } = this.props;
    const { dataSource, columns, masking } = this.state;
    let tabalHeight = parseInt(height) - 72.5;
    let maskHeight = parseInt(height) - 57.5;
    tabalHeight = tabalHeight.toString() + 'px';
    maskHeight = maskHeight.toString() + 'px';

    return (
      <div style={{ height }}>
        <div>
          <FirstHeaderC title={type == 2 ? '场内（ETF）基金申赎成分股' : '基金申赎成分股'} />
        </div>
        <div style={{ position: 'relative' }}>
          <TableC columns={columns} loading={this.props.loading} dataSource={dataSource} scroll={{ y: tabalHeight }} rowKey='id' hidePage={true} />
          {masking ? <NoDataMaskC height={maskHeight} title={'请选择证券代码，加载数据！'} /> : null}
        </div>
      </div>
    );
  }
}

// props默认值
BaseInfoC.propsTypes = {
  tradingcode: PropTypes.number | PropTypes.string, // 证券代码
  height: PropTypes.string, // 组件高
  timeStamp: PropTypes.number | PropTypes.string, // 时间戳
};

export default connect(({ etfOrderM, loading }) => ({
  etfOrderM,
  loading: loading.effects['etfOrderM/getStockInfo'],
}))(BaseInfoC);
